{% extends 'base.html' %}

{% block title %}球台管理 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}球台管理{% endblock %}

{% block extra_css %}
<style>
    .search-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .summary-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .summary-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border-left: 4px solid;
    }

    .summary-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .summary-card.total { border-left-color: #007bff; }
    .summary-card.available { border-left-color: #28a745; }
    .summary-card.maintenance { border-left-color: #ffc107; }
    .summary-card.disabled { border-left-color: #dc3545; }

    .summary-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .summary-icon.total { color: #007bff; }
    .summary-icon.available { color: #28a745; }
    .summary-icon.maintenance { color: #ffc107; }
    .summary-icon.disabled { color: #dc3545; }

    .summary-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
    }

    .summary-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    .table-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 1.5rem;
    }

    .table-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border-left: 4px solid;
        position: relative;
    }

    .table-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .table-card.available { border-left-color: #28a745; }
    .table-card.maintenance { border-left-color: #ffc107; }
    .table-card.disabled { border-left-color: #dc3545; }

    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .table-name {
        font-size: 1.25rem;
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .table-status {
        padding: 0.25rem 0.75rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .status-available {
        background: #d4edda;
        color: #155724;
    }

    .status-maintenance {
        background: #fff3cd;
        color: #856404;
    }

    .status-disabled {
        background: #f8d7da;
        color: #721c24;
    }

    .table-info {
        margin-bottom: 1rem;
    }

    .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        color: #6c757d;
        font-size: 0.875rem;
    }

    .info-item i {
        width: 16px;
        margin-right: 0.5rem;
        color: #007bff;
    }

    .table-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .batch-actions {
        background: white;
        border-radius: 15px;
        padding: 1rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
        display: none;
    }

    .batch-actions.show {
        display: block;
    }

    .checkbox-wrapper {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .table-checkbox {
        transform: scale(1.2);
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.3;
    }

    @media (max-width: 768px) {
        .table-grid {
            grid-template-columns: 1fr;
        }

        .summary-cards {
            grid-template-columns: repeat(2, 1fr);
        }

        .table-header {
            flex-direction: column;
            gap: 0.5rem;
        }

        .table-actions {
            justify-content: stretch;
        }

        .table-actions .btn {
            flex: 1;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 搜索筛选 -->
    <div class="search-card">
        <form method="GET" action="{{ url_for('tables.list') }}">
            <div class="row g-3">
                <div class="col-md-3">
                    {{ form.keyword.label(class="form-label") }}
                    {{ form.keyword(class="form-control") }}
                </div>
                {% if current_user.is_super_admin() %}
                <div class="col-md-2">
                    {{ form.campus_id.label(class="form-label") }}
                    {{ form.campus_id(class="form-select") }}
                </div>
                {% endif %}
                <div class="col-md-2">
                    {{ form.status.label(class="form-label") }}
                    {{ form.status(class="form-select") }}
                </div>
                <div class="col-md-2">
                    {{ form.sort_by.label(class="form-label") }}
                    {{ form.sort_by(class="form-select") }}
                </div>
                <div class="col-md-1 d-flex align-items-end gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                    <a href="{{ url_for('tables.list') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-clockwise"></i>
                    </a>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-12 d-flex justify-content-end">
                    <a href="{{ url_for('tables.create') }}" class="btn btn-success">
                        <i class="bi bi-plus-circle me-1"></i>添加球台
                    </a>
                </div>
            </div>
        </form>
    </div>

    <!-- 统计汇总 -->
    <div class="summary-cards">
        <div class="summary-card total">
            <div class="summary-icon total">
                <i class="bi bi-grid-3x3"></i>
            </div>
            <h3 class="summary-number">{{ summary.total_tables }}</h3>
            <div class="summary-label">总球台数</div>
        </div>

        <div class="summary-card available">
            <div class="summary-icon available">
                <i class="bi bi-check-circle"></i>
            </div>
            <h3 class="summary-number">{{ summary.available_tables }}</h3>
            <div class="summary-label">可用球台</div>
        </div>

        <div class="summary-card maintenance">
            <div class="summary-icon maintenance">
                <i class="bi bi-tools"></i>
            </div>
            <h3 class="summary-number">{{ summary.maintenance_tables }}</h3>
            <div class="summary-label">维护中</div>
        </div>

        <div class="summary-card disabled">
            <div class="summary-icon disabled">
                <i class="bi bi-x-circle"></i>
            </div>
            <h3 class="summary-number">{{ summary.disabled_tables }}</h3>
            <div class="summary-label">已禁用</div>
        </div>
    </div>

    <!-- 批量操作 -->
    <div class="batch-actions" id="batchActions">
        <form method="POST" action="{{ url_for('tables.batch_operation') }}" id="batchForm">
            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label">已选择 <span id="selectedCount">0</span> 个球台</label>
                    <input type="hidden" name="table_ids" id="tableIds">
                    {{ csrf_token() }}
                </div>
                <div class="col-md-3">
                    <label class="form-label">批量操作</label>
                    <select name="action" class="form-select" required>
                        <option value="">请选择操作</option>
                        <option value="available">设为可用</option>
                        <option value="maintenance">设为维护</option>
                        <option value="disabled">设为禁用</option>
                        <option value="delete">删除</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <button type="submit" class="btn btn-warning me-2" onclick="return confirmBatch()">
                        <i class="bi bi-check-circle me-1"></i>执行操作
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="clearSelection()">
                        <i class="bi bi-x-circle me-1"></i>取消选择
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 球台列表 -->
    {% if tables %}
        <!-- 统计信息 -->
        <div class="row mb-3">
            <div class="col-12">
                <small class="text-muted">
                    找到 {{ total }} 个球台，当前显示第 {{ pagination.page }} 页，共 {{ pagination.pages }} 页
                </small>
            </div>
        </div>

        <!-- 球台网格 -->
        <div class="table-grid">
            {% for table in tables %}
            <div class="table-card {{ table.status }}">
                <div class="checkbox-wrapper">
                    <input type="checkbox" class="form-check-input table-checkbox"
                           value="{{ table.id }}">
                </div>

                <div class="table-header">
                    <div>
                        <h5 class="table-name">{{ table.name }}</h5>
                    </div>
                    <span class="table-status status-{{ table.status }}">
                        {% if table.status == 'available' %}可用
                        {% elif table.status == 'maintenance' %}维护中
                        {% elif table.status == 'disabled' %}禁用
                        {% endif %}
                    </span>
                </div>

                <div class="table-info">
                    <div class="info-item">
                        <i class="bi bi-building"></i>
                        <span>{{ table.campus.name if table.campus else '未分配校区' }}</span>
                    </div>
                    <div class="info-item">
                        <i class="bi bi-calendar"></i>
                        <span>创建时间：{{ table.created_at.strftime('%Y-%m-%d') if table.created_at else '未知' }}</span>
                    </div>
                </div>

                <div class="table-actions">
                    <a href="{{ url_for('tables.detail', id=table.id) }}"
                       class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-eye me-1"></i>详情
                    </a>
                    <a href="{{ url_for('tables.edit', id=table.id) }}"
                       class="btn btn-outline-warning btn-sm">
                        <i class="bi bi-pencil me-1"></i>编辑
                    </a>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-info dropdown-toggle"
                                data-bs-toggle="dropdown">
                            状态
                        </button>
                        <ul class="dropdown-menu">
                            {% if table.status != 'available' %}
                            <li><a class="dropdown-item" href="#" onclick="updateStatus({{ table.id }}, 'available')">
                                <i class="bi bi-check-circle text-success me-2"></i>设为可用
                            </a></li>
                            {% endif %}
                            {% if table.status != 'maintenance' %}
                            <li><a class="dropdown-item" href="#" onclick="updateStatus({{ table.id }}, 'maintenance')">
                                <i class="bi bi-tools text-warning me-2"></i>设为维护
                            </a></li>
                            {% endif %}
                            {% if table.status != 'disabled' %}
                            <li><a class="dropdown-item" href="#" onclick="updateStatus({{ table.id }}, 'disabled')">
                                <i class="bi bi-x-circle text-danger me-2"></i>设为禁用
                            </a></li>
                            {% endif %}
                        </ul>
                    </div>
                    <a href="{{ url_for('tables.delete', id=table.id) }}"
                       class="btn btn-outline-danger btn-sm"
                       onclick="return confirm('确定要删除此球台吗？')">
                        <i class="bi bi-trash"></i>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        {% if pagination.pages > 1 %}
        <nav aria-label="球台列表分页" class="mt-4">
            <ul class="pagination justify-content-center">
                {% if pagination.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('tables.list', page=pagination.prev_num,
                        keyword=form.keyword.data, campus_id=form.campus_id.data,
                        status=form.status.data, sort_by=form.sort_by.data) }}">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>
                {% endif %}

                {% for page_num in pagination.iter_pages() %}
                    {% if page_num %}
                        {% if page_num != pagination.page %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('tables.list', page=page_num,
                                keyword=form.keyword.data, campus_id=form.campus_id.data,
                                status=form.status.data, sort_by=form.sort_by.data) }}">
                                {{ page_num }}
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item active">
                            <span class="page-link">{{ page_num }}</span>
                        </li>
                        {% endif %}
                    {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">…</span>
                    </li>
                    {% endif %}
                {% endfor %}

                {% if pagination.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('tables.list', page=pagination.next_num,
                        keyword=form.keyword.data, campus_id=form.campus_id.data,
                        status=form.status.data, sort_by=form.sort_by.data) }}">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}

    {% else %}
        <!-- 空状态 -->
        <div class="empty-state">
            <i class="bi bi-grid-3x3"></i>
            <h5>暂无球台数据</h5>
            <p>
                {% if form.keyword.data or form.campus_id.data or form.status.data %}
                没有找到符合条件的球台，请尝试调整搜索条件
                {% else %}
                还没有添加任何球台
                {% endif %}
            </p>
            <a href="{{ url_for('tables.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-2"></i>添加第一个球台
            </a>
        </div>
    {% endif %}
</div>

<!-- 状态更新表单模板 -->
<form id="statusForm" method="POST" style="display: none;">
    {{ csrf_token() }}
    <input type="hidden" name="table_id">
    <input type="hidden" name="status">
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 批量选择功能
    const checkboxes = document.querySelectorAll('.table-checkbox');
    const batchActions = document.getElementById('batchActions');
    const selectedCount = document.getElementById('selectedCount');
    const tableIds = document.getElementById('tableIds');

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBatchActions);
    });

    function updateBatchActions() {
        const selected = Array.from(checkboxes).filter(cb => cb.checked);
        const count = selected.length;

        if (count > 0) {
            batchActions.classList.add('show');
            selectedCount.textContent = count;
            tableIds.value = selected.map(cb => cb.value).join(',');
        } else {
            batchActions.classList.remove('show');
            selectedCount.textContent = '0';
            tableIds.value = '';
        }
    }

    // 清除选择
    window.clearSelection = function() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
        });
        updateBatchActions();
    };

    // 批量操作确认
    window.confirmBatch = function() {
        const action = document.querySelector('select[name="action"]').value;
        const count = document.querySelectorAll('.table-checkbox:checked').length;

        if (!action) {
            alert('请选择要执行的操作');
            return false;
        }

        const actionText = {
            'available': '设为可用',
            'maintenance': '设为维护',
            'disabled': '设为禁用',
            'delete': '删除'
        }[action];

        return confirm(`确定要${actionText} ${count} 个球台吗？`);
    };

    // 状态更新
    window.updateStatus = function(tableId, status) {
        const statusText = {
            'available': '可用',
            'maintenance': '维护中',
            'disabled': '禁用'
        }[status];

        if (confirm(`确定要将球台状态设为"${statusText}"吗？`)) {
            const form = document.getElementById('statusForm');
            form.action = `/tables/${tableId}/status`;
            form.querySelector('input[name="table_id"]').value = tableId;
            form.querySelector('input[name="status"]').value = status;
            form.submit();
        }
    };
});
</script>
{% endblock %}